<template>
	<view class="wm">
		<block v-if="isAllData">
			<view class="title">{{schooldetail.name}}</view>
			<view class="school_info">
				<view class="logo">
					<image :src="schooldetail.logo !== undefined ? logoImageUrl + schooldetail.logo : ''"></image>
				</view>
				<view class="info">
					<text>{{schooldetail.quality}} | {{schooldetail.class}} | {{schooldetail.grade}} | {{schooldetail.property}}</text>
					<view><uni-icons type="location" size="12"></uni-icons>{{schooldetail.address}}</view>
				</view>
			</view>
			<!-- 校园图片轮播图开始 -->
			<swiper  :indicator-dots="true" :autoplay="true" :interval="5000" :duration="1000" :circular="true" indicator-active-color="#ccc">
				<swiper-item v-for="(item,i) in schooldetail.photo" :key="i" class="swiper-item">
						<image :src="portUrl + item.video_cover" mode=""></image>
				</swiper-item>
			</swiper>
			<!-- 校园图片轮播图结束 -->
			<view class="introduce">
				<rich-text :nodes="schooldetail.introduce"></rich-text>
			</view>
		</block>
		<block v-else>
			<no-data></no-data>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				queryObj:{
					id:0
				},
				schooldetail:{},
				isAllData:false
			}
		},
		onLoad:function(options){
		     this.queryObj.id = options.schoolid || 0;
			 this.getSchoolDetail();
		},
		computed:{
			portUrl(){
				return getApp().globalData.portUrl;
			},
			logoImageUrl(){
				return getApp().globalData.portImageUrl + "schoollogo/";
			}
		},
		methods: {
			async getSchoolDetail(){
				const {data:res} = await uni.$http.post("schools/getSchoolDetail",this.queryObj);
				if(res.meta.status !== 1) return uni.$showMsg();
				this.schooldetail = res.data;
				this.isAllData = true;
			}
		}
	}
</script>

<style lang="scss">
	@font-face {
		font-family: CustomFont;
		src: url('./iconfont.ttf');
	}
	.title{
		font-size: 50rpx;
		text-align: center;
		font-weight: bold;
		margin:20rpx;
	}
	.school_info{
		display: flex;
		justify-content: left;
		font-size:25rpx;
		color:#515151;
		margin:20rpx 0;
		.logo{
			height:70rpx;
			width:70rpx;
			border-radius: 50%;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.info{
			margin-left:10rpx;
			text{
				font-size:25rpx;
				font-weight: bold;
			}
		}
	}
/*轮播图开始*/
swiper{
	width: 100%;
	height: 400rpx;
	overflow: hidden;
	border-radius: 10rpx;
	
    .swiper-item{
		display: flex;
		justify-content: center; /*水平居中*/
		align-items: center; /*垂直居中*/
		width: 100%;
		height: 100%;
	}
	.swiper-item image{
		width: 100%;
	}
}
/*轮播图结束*/
</style>
